NetCloak 3.0 Pro User's Guide: Creating Pages: A Simple Example

	Version 3.0 Pro User's Guide

Creating Pages: A Simple Example	Previous \| Next Contents

Let's use the recipe system as our first example. We'll have users enter recipes (name, ingredients, and directions) and then put the list of recipes in a menu available for browsing by other visitors. If you haven't already, take a look at the Recipes example included on the NetCloak Pro disk to see just how it works.

First, let's take a look at the Recipe Menu Page. Here is the HTML for the "RecipeMenu.html" file.

    <HTML>    <HEAD>    <TITLE>Recipe Menu</TITLE>    <META HTTP-EQUIV="Pragma" CONTENT="No-cache">    </HEAD>    <BODY>    <H1>Recipe Menu</H1>    If you would like, please 
    <A HREF="RecipeEntry.html">enter your favorite recipe</A>    or browse the recipes entered so far...
    <UL>    </UL>    <P>IMPORTANT: If this page seems to be missing recently added 
    documents, click the "Reload Page" button on your Web Browser to 
    update the menu.
    <P>    <I>This page is being maintained automatically by NetCloak Pro.</I>    </BODY>    </HTML>

When someone clicks on the "enter your favorite recipe" link, they will be taken to our entry form "RecipeEntry.html" which is made up of standard HTML that looks like this:

    <HTML>    <TITLE>Recipe Entry Form</TITLE>    <H1>Recipe Entry Form</H1>    <FORM method=POST action="/NetCloak.acgi$/Recipes/Recipe.fdml">    Author: <INPUT TYPE="text" NAME="Author" SIZE="30" MAXLENGTH="30">    <P>    Recipe Name: <INPUT TYPE="text" NAME="RecipeName" SIZE="30" MAXLENGTH="30">    <P>    Ingredients:<BR>    <TEXTAREA name="Ingredients" rows=10 cols=60></TEXTAREA>    <P>    Directions:<BR>    <TEXTAREA name="Directions" rows=10 cols=60></TEXTAREA>    <P>    <INPUT type=submit value="Submit Recipe"> 
    <INPUT type=reset value="Start Over"><P>    </FORM>    </HTML>

Notice in particular the fourth line, which is the FORM command. The action portion of this command specifies NetCloak.acgi as the handling application and gives a path to the FDML document that will be used to process the article. The rest of the form is all standard HTML. If the NetCloak Pro plug-in were installed instead of the NetCloak Pro CGI application, you would remove "/NetCloak.acgi$" from the action path.

The interesting part of our recipe system is the "Recipe.FDML" file, which is a template where we specify exactly how each incoming form should be processed. Let's look at the file:

     1) <CREATEDOC>"<REPLACE_FN RecipeName>.html"</CREATEDOC>     2) <MENUDOC>"RecipeMenu.html"     3)  <LI> <A HREF="<HTMLFILENAME>"><REPLACE RecipeName></A>     4) </MENUDOC>     5) <HTML>     6) <HEAD>     7) <TITLE><REPLACE RecipeName></TITLE>     8) </HEAD>     9) <BODY>    10) <H1><REPLACE RecipeName></H1>    11) <Address>    12) This article submitted by <REPLACE Author> on <DATE>.
    13) </Address>    14) <HR>    15) <H3>Ingredients -</H3>    16) <BULLET Ingredients>    17) <P>    18) <H3>Directions -</H3>    19) <REPLACE Directions>    20) <HR>    21) Article complete. Click 
    22) <A HREF="RecipeMenu.html">HERE</A>    23) to return to the Recipe Menu Page.
    24) </BODY>    25) </HTML>

Line 1 - The CREATEDOC primary directive is required. This is the way you tell NetCloak Pro to create a new HTML document, based on the HTML document template that begins on line 5.

Notice in particular the file name and path. In this case, because the path does not begin with a slash character, it is specified relative to the location of the FDML file. Therefore, this system will store each new recipe article in the same folder as the FDML file. You might want to specify the path to the created document relative to the web server root. In that case the CREATEDOC directive would be:

    <CREATEDOC>"/Recipes/<REPLACE_FN RecipeName>.html"</CREATEDOC>

Specifying a sub folder a level deeper than the one your FDML and other documents are in usually makes the system easier to maintain. This way, all user-entered articles are in a single folder. For this basic example, we have kept everything in the Recipes folder.

Another important thing to notice is how the REPLACE command works within directives. This is what allows you to specify unique file names for each article entered.

Line 2 - The MENUDOC directive tells NetCloak Pro to update the menu page (which in this case is also our Recipe Home Page). It specifies the path of the HTML document to be updated and then includes HTML syntax to define exactly how the line should look.

Note how, again, we've specified the path relative to the FDML file itself (no leading slash in the path). This just means that the menu document, RecipeMenu.html, and the FDML file, Recipe.FDML, are in the same folder.

Line 3 - Within the link text in the MENUDOC directive is the HTMLFILENAME command, for which NetCloak Pro substitutes a path to the newly created HTML file. In addition to the URL, you can specify what the user will see on the menu line. In this example we have chosen to use the recipe name. You could also show the author, date, or whatever you like right on the menu.

Line 5 - This line marks the beginning of the HTML document template, which will be used to create the new recipe document. While it is not required, it is good form in any HTML document to include the <HTML> tag.

Line 7 - Here the REPLACE command will insert the Recipe Name as the title of the document.

Line 10 - NetCloak Pro will again place the Recipe Name into the heading section at the top of the document.

Line 12 - On this line, we date-stamp the recipe and give credit where credit is due, by inserting the author's name into the page.

Line 16 - The BULLET insertion command will format the ingredient list as a series of bullet points. Bullets are one of a number of ways to format your text.

Line 19 - If you had wanted the ingredients to be plain text on line 16, you could just use a REPLACE command, as we have done here with the "Directions" entry field.

That's it--you have an interactive recipe system on your Web server with the help of NetCloak Pro and just 60 lines of HTML! You could easily enhance your Recipe system by simply using Maxum's Phantom software (or any other search engine) to index the recipes and provide full text searches.

Notice that the Recipe Home Page (our "menu document") is constantly changing as new recipes are entered. To prevent this page from being cached by Web browsers and proxy servers, we have added a META tag to the header of the file, which tells the browser to act as if a "Pragma: No-cache" field is present in the HTTP header. The META tag looks like this:

    <META HTTP-EQUIV="Pragma" CONTENT="No-cache">

This META tag is standard HTML; it is not specific to pages processed by NetCloak, so you can use it anytime you want to ensure that a page is not cached by the browser.

For practice, you might want to make some additional changes to our example:

You could add a graphic to the menu and to the finished articles. Hint: Include a few well placed HTML <IMG> tags in the "RecipeMenu.html" and "Recipe.FDML" files.
Put the current date next to each recipe name as it appears in the menu. Hint: Place a date insertion command, <DATE>, after the <REPLACE RecipeName> in the <MENUDOC> directive of the "RecipeMenu.html" file.
Add a "Cooking Time" or other field to the form and then make sure it gets processed and put onto the final recipe article. Hint: This one will require you to add a new field to the HTML form and then add to the "Recipe.FDML" page to put the new field(s) onto the finished articles.

If you feel like you know what's going on, you're ready for the "Tricky Example".


Copyright © 1996-1999 Maxum Development Corporation http://www.maxum.com/	Previous \| Next Contents